<template>
  <p
    class="noneditable irremovable"
    contenteditable="false"
    data-type="paragraph"
    :data-id="dataId"
    :data-block-id="blockId"
  >
    <template v-if="guideIndex == 0">下列术语和定义适用于本文件。</template>
    <template v-if="guideIndex == 1"
      ><RefSpan
        v-for="sel of guideSelections"
        :key="sel.dataId"
        :item="sel"
      />界定的以及下列术语和定义适用于本文件。</template
    >
    <template v-if="guideIndex == 2"
      ><RefSpan
        v-for="sel of guideSelections"
        :key="sel.dataId"
        :item="sel"
      />界定的以及下列术语和定义适用于本文件。为了便于使用，以下重复列出了<RefSpan
        v-for="(sel, index) of guideSelections"
        :key="sel.dataId + index"
        :item="sel"
      />中的一些术语和定义。</template
    >
    <template v-if="guideIndex == 3"
      ><RefSpan v-for="sel of guideSelections" :key="sel.dataId" :item="sel" />界定的术语和定义适用于本文件。</template
    >
    <template v-if="guideIndex == 4"
      ><RefSpan
        v-for="sel of guideSelections"
        :key="sel.dataId"
        :item="sel"
      />界定的下列术语和定义适用于本文件，为了便于使用，以下重复列出<RefSpan
        v-for="(sel, index) of guideSelections"
        :key="sel.dataId + index"
        :item="sel"
      />中的一些术语和定义。</template
    >
  </p>
</template>

<script>
import { v4 as uuid } from 'uuid'
import RefSpan from './span/RefSpan.vue'

export default {
  name: 'TermGuideParagraph',
  components: { RefSpan },
  data() {
    return {
      dataId: uuid(),
      blockId: uuid()
    }
  },
  computed: {
    termGuideObj() {
      return this.$store.state.xmleditor.termGuideObj
    },
    guideSelections() {
      return this.termGuideObj.selections
    },
    guideIndex() {
      return this.termGuideObj.guideIndex
    }
  }
}
</script>
